<template>
    <!-- 透传所有属性，合并扩展功能 -->
    <vxe-modal ref="vxeModalProRef" v-bind="modalOptions">
        <template v-for="(_, name) in $slots" #[name]="slotProps">
            <slot :name="name" v-bind="slotProps" />
        </template>
        <!-- 扩展插槽或功能可在此处添加 -->
    </vxe-modal>
</template>

<script setup>
import { computed, useAttrs, ref, onMounted, watch } from 'vue'

const props = defineProps({
    // vxe-modal 原有属性（可按需补充）
    // modelValue: Boolean, // 启用 v-model 支持
    // title: String,
    // width: [Number, String],
    // height: [Number, String],
    // ...其他常用属性
    // 扩展属性
    proOptions: {
        type: Object,
        default: () => ({})
    },
    // 新增：遮罩毛玻璃模糊强度
    backdropFilter: {
        type: [Number, String],
        default: null
    }
})
const attrs = useAttrs()
// 默认配置
const defaultProps = {
    width: 600,
    draggable: true,
    resize: true,
    // ...其他默认配置
}
// 合并后的配置，包含 $attrs、props（排除proOptions）、proOptions
const { proOptions, backdropFilter, ...restProps } = props
const modalOptions = computed(() => ({
    ...defaultProps,
    ...restProps,
    ...attrs,
    ...proOptions
}))
const vxeModalProRef = ref(null)

// 动态插入/更新遮罩毛玻璃样式
function setModalMaskBlur(backdropFilter) {
    let styleId = 'dynamic-vxe-modal-blur-style';
    let styleTag = document.getElementById(styleId);
    if (!backdropFilter) {
        // 不传或为0时移除样式
        if (styleTag) styleTag.remove();
        return;
    }
    // 直接命中 .vxe-modal--wrapper，提升优先级 backdropFilter
    const css = `.vxe-modal--wrapper {\n  backdrop-filter: blur(${backdropFilter}px) !important;\n  -webkit-backdrop-filter: blur(${backdropFilter}px) !important;\n}`;
    if (!styleTag) {
        styleTag = document.createElement('style');
        styleTag.id = styleId;
        document.head.appendChild(styleTag);
    }
    styleTag.innerHTML = css;
}

onMounted(() => {
    //if (backdropFilter) setModalMaskBlur(backdropFilter);
})
watch(() => props.backdropFilter, (val) => {
    setModalMaskBlur(val);
})
// 监听弹框打开/关闭，动态添加/移除样式
watch(() => attrs.modelValue, (val) => {
    if (val) {
        // 打开弹框时添加样式
        setModalMaskBlur(props.backdropFilter)
    } else {
        // 关闭弹框时移除样式
        setModalMaskBlur(null)
    }
})
// 暴露实例
function Instance() {
    return vxeModalProRef.value
}
// 暴露实例方法
defineExpose({
    // zoom: () => vxeModalPro.value && vxeModalPro.value.zoom && vxeModalPro.value.zoom()
    Instance,
})
</script>

<style scoped lang="scss">
/* 可扩展样式 注意>>这是SCSS注释，正确的格式  '//' 这是CSS注释，SCSS不支持 */
</style>
